<template>
	<view class="container">
		<view class="login-box">
			<view style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
				<span class="login-text">用户登录</span>
				<!-- <input style="margin-top: 5vh;" type="text" placeholder="用户名" v-model="username" class="input-field" /> -->
				<el-input style="margin-top: 5vh;width: 80%" placeholder="用户名" v-model="username">
					<template slot="prepend"><i class="el-icon-user"></i></template>
				</el-input>
				<el-input style="margin-top: 2vh;width: 80%" placeholder="密码" show-password v-model="password">
					<template slot="prepend"><i class="el-icon-lock"></i></template>
				</el-input>
				<view style="text-align: left;width: 80%;margin-top: 2vh;">
					<el-checkbox v-model="checked">记住密码</el-checkbox>
				</view>
				<el-button style="margin-top: 2vh;width: 80%;" type="primary" @click="handleLogin" round>登录</el-button>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		Login
	} from '@/api/user.js'
	import config from '@/config.js'
	export default {

		data() {
			return {
				username: '',
				password: '',
				checked: false
			};
		},
		onLoad() {
			// // #ifdef APP-PLUS
			// setTimeout(() => {
			//   plus.screen.unlockOrientation(); // 解锁屏幕方向（如果之前被锁定）
			//   plus.screen.lockOrientation('landscape-primary'); // 锁定为横屏正方向
			// }, 600); // 延时是为了等待页面加载完成，时间可能需要根据实际情况调整
			// // #endif
			plus.screen.lockOrientation('landscape-primary'); // 强制横屏
		},
		//  onUnload() {
		//    // #ifdef APP-PLUS
		//    plus.screen.lockOrientation('portrait-primary'); // 页面卸载时恢复竖屏
		//    // #endif
		//  }
		// ,
		methods: {
			async handleLogin() {
				let that = this;
				// 这里可以添加登录逻辑，比如发送请求到服务器进行验证  
				console.log('用户名:', this.username);
				console.log('密码:', this.password);
				// 示例：简单弹出登录成功的提示  
				await Login({
					data: {
						userid: this.username,
						password: this.password
					}
				}).then(res => {
					if (res.data.statuscode == 1) {
						config.userid = res.data.data["userid"];
						config.roleid = res.data.data["roleid"];
						config.rolename = res.data.data["rolename"];
						config.workshopid = res.data.data["workshopid"];

						uni.navigateTo({
							url: '/pages/home/index', // 目标页面的路径
							success: function() {
								console.log('跳转成功');
							},
							fail: function() {
								console.log('跳转失败');
							}
						});
					} else {
						uni.showToast({
							title: '用户名或者密码错误'
						});
					}

				});



			},
		},
	};
</script>

<style scoped>
	/deep/.el-input__inner {
		background: rgba(0, 38, 85, 0.50);
		border: none;
	}

	/deep/.el-input-group__prepend {
		background: rgba(0, 38, 85, 0.50);
		border: none;
	}

	.login-text {
		margin-top: 2vh;
		font-family: SourceHanSansSC-Regular;
		font-size: 24px;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
		line-height: 20px;
		font-weight: 400;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		/* 使容器高度占满整个视口高度 */
		background-color: #f0f0f0;
		/* 背景颜色 */
		background-image: url('../../static/imgPc/登录-背景@1x.jpg');
		background-size: cover;
		/* 使背景图覆盖整个容器 */
		background-position: center;
		/* 背景图居中显示 */
		background-repeat: no-repeat;
		/* 防止背景图重复 */
	}

	.login-box {
		width: 30vw;
		height: 39.4vh;
		position: absolute;
		left: 15.4vw;
		top: 30vh;
		background-image: url('../../static/imgPc/登录窗口@1x.png');
		background-size: 100% 100%;
	}

	.input-field {
		width: 80%;
		height: 40px;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
		box-sizing: border-box;
	}

	.login-button {
		width: 80%;
		padding: 10px;
		background-color: #1aad19;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 16px;
	}
</style>